<template>
    <div class="page-container">
        <a-input-search placeholder="请输入关键词,例如:员工姓名、手机号" v-model="params.name" @search="onSearch" style="width:300px;">
            <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
        </a-input-search>
        <div class="grid-container">
        <a-table bordered :columns="columns" :dataSource="dataList"  :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle" style="border-left: 1px solid #e8e8e8">
            <template slot="index" slot-scope="text,record,index">
                {{index+1}}
            </template>
            <template slot="role" slot-scope="text,record,index">
                <div v-if="record.roleList">
                    <a-tag color="orange" v-for="role in record.roleList" :key="role.id">{{role.roleName}}</a-tag>
                </div>
            </template>
            <template slot="operation" slot-scope="text,record">
                <a-button type="default" @click="onSelect(record)">选择</a-button>
            </template>
        </a-table>
        <a-row type="flex" class="grid-table-tool">
            <a-col :span="12" :order="1" class="tool-action"></a-col>
            <a-col :span="12" :order="2" class="tool-pagination" v-if="total > params.pageSize">
                <a-pagination  :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
            </a-col>
        </a-row>
        </div>
    </div>
</template>

<script>
    import {findList} from "../../api/user";

    const columns=[
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title:'员工姓名',dataIndex:'name',align:'left'},
        {title:'手机号',dataIndex:'phone',align:'left'},
        {title: '角色',key: 'role',align:'center',scopedSlots: { customRender: 'role' }},
        {title: '选择',dataIndex: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}
    ]
    export default {
        props:{
            selectedKey:{
                type:Number,
                default: 0
            }
        },
        data(){
            return{
                columns,
                params:{
                    key:'',
                    current:1,
                    pageSize:10,
                },
                total:0,
                dataList:[],

                loading:false
            }
        },
        methods:{

            onSearch(){
                this.params.current = 1;
                this.onLoad();
            },
            //角色中是否包含站长
            onIsSelect(roleList){
                roleList.filter(e=>e.name=='站长')
            },
            onSelect(record){
                console.log('======record',record)
               this.$emit('result', record);
            },

            async onLoad(){
                this.loading = true;
                let resp = await findList(this.params);
                if (this.qUtil.validResp(resp)) {
                    this.total = resp.data.total;
                    this.dataList = resp.data.dataList;
                }
                this.loading = false;
            },
        },
        mounted(){
            if(this.selectedKey != null && this.selectedKey > 0){
                this.selection = [this.selectedKey]
            }
            this.onLoad();
        }
    }
</script>

<style scoped>

</style>